{% extends 'layout.html' %}
{% load static %}
{% block title %} 信箱 {% endblock %}
{% block BodyClass %}page-title{% endblock %}
{% block contect %}
<main class="main" xmlns="http://www.w3.org/1999/html">
    <!-- Page Title -->
    <div class="page-title" data-aos="fade">
      <div class="container d-lg-flex justify-content-between align-items-center">
        <h1 class="mb-2 mb-lg-0"></h1>
        <nav class="breadcrumbs">
          <ol>
            <li><a href="{% url 'index'%}"></a></li>
            <li class="current"></li>
          </ol>
        </nav>
      </div>
    </div><!-- End Page Title -->

    <!-- Starter Section Section -->
    <section id="starter-section" class="starter-section section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <h2>信箱</h2>
      </div><!-- End Section Title -->

      <div class="container">
        <div class="row justify-content-between">

          <div class="col-lg-5 d-flex align-items-center">
            <ul class="nav nav-tabs" data-aos="fade-up" data-aos-delay="100">
              {% for item in usersInformation %}
                  <li class="nav-item" >
                    {% if item.1.id == Now %}
                        <a class="nav-link active show" data-bs-toggle="tab" data-bs-target="#features-tab-{{item.0}}">
                    {% else %}
                        <a class="nav-link" href="information?Now={{item.1.id}}">
                    {% endif %}
                      <i class="bi bi-binoculars"></i>

                      <div>
                          <h4 class="d-none d-lg-block">{{item.1.title}}</h4>
                          <p class="" style="font-size:28px,font-color:black">
                            {{item.1.content}}
                          </p>
                      </div>
                    </a>
                  </li>
              {% endfor %}
            </ul>
        </div>

        <div class="col-lg-6">
            <div class="tab-content" data-aos="fade-up" data-aos-delay="200">
                <div class="tab-pane fade active show" id="features-tab-{{item.0}}">
                    <img src="{{url}}" alt="" class="img-fluid">
                </div>
<!--                <div class="tab-pane fade" id="features-tab-{{item.0}}">-->
<!--                  <img src="../../static/img/tabs-{{item.0}}.jpg" alt="" class="img-fluid">-->
<!--                </div>-->
            </div>
          </div>

        </div>
      </div>






    </section>

  </main>

{% endblock %}
